<template>
	<div>
		<!-- 轮播图区域 
			 - 全屏宽度显示
			 - 设置自动播放，间隔5秒
			 - 始终显示箭头导航
			 - 移除指示器，使用圆角样式美化
		-->
		<el-row :gutter="0" class="animate-section" data-animation="fade-in">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<div class="mukuaibox">
					<div class="block">
						<el-carousel class="mukuai rounded-carousel" :interval="5000" height="360px"
							indicator-position="none" arrow="always" :autoplay='true'>
							<el-carousel-item v-for="item in carouselList" :key="item.id">
								<img :src="item.image" class="carouselImg rounded-img" />
							</el-carousel-item>
						</el-carousel>
					</div>
				</div>
			</el-col>
		</el-row>

		<!-- 公告区域 
			 - 显示最新公告信息
			 - 使用滚动效果展示多条公告
			 - 保留圆角样式增强视觉效果
		-->
		<el-row :gutter="0" class="animate-section" data-animation="slide-up">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<div class="scroll-container rounded-container">
					<div class="newNotice">最新公告</div>
					<div class="scroll-content">
						<div v-for="notice in noticeList.slice(0, 5)" :key="notice.id">
							<!-- 内部文章链接 -->
							<router-link :to="'/listInfo/' + notice.id" v-if="notice.articleType == 0">
								<p>{{ notice.title }}</p>
							</router-link>
							<!-- 外部链接 -->
							<a :href="notice.customContentView" target="_blank" v-else-if="notice.articleType == 2">
								<p>{{ notice.title }}</p>
							</a>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>

		<!-- 慈善行业资讯区域 
			 - 左侧：区域标题和简介
			 - 右侧：可切换的资讯内容列表
			 - 按发布时间展示，包含日期和摘要信息
		-->
		<el-row :gutter="0" class="elRow animate-section" data-animation="slide-up">
			<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
				<div class="contentBox1">
					<div class="txtBox">
						<div class="boxTitle">慈善行业资讯</div>
						<p>聚焦公益前沿动态，涵盖政策解读、项目进展、爱心案例等内容，及时传递行业声音，助力从业者把握趋势，让公众走近慈善、读懂善意，搭建透明互通的信息桥梁。</p>
						<div class="more">了解更多</div>
					</div>
				</div>
			</el-col>
			<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
				<div class="contentBox2">
					<div class="newsRightBox">
						<!-- 资讯分类标签切换 -->
						<div class="tab-tit">
							<a @click="articleIndex = curId" v-for="(items, curId) in articleList" :key="curId"
								class='tabt' :class="{ 'tabCur': curId === articleIndex }">
								{{ items.name }}
							</a>
						</div>
						<div style="margin-top:15px;">
							<ul class="newsUl">
								<!-- 资讯列表项 -->
								<li class="newContentBox"
									v-for="article in articleList[articleIndex]?.childrenarticles?.slice(0, 4)"
									:key="article.id">
									<!-- 内部文章链接 -->
									<router-link :to="'/listInfo/' + article.id" v-if="article.articleType == 0">
										<div class="timeBox">
											<p class="day">{{ article.issueTime | formatDate1 }}</p>
											<p class="ym">{{ article.issueTime | formatDate }}</p>
										</div>
										<div class="newContent">
											<div class="newTitle">{{ article.title }}</div>
											<div class="newJs" v-html="article.description"></div>
										</div>
									</router-link>
									<!-- 外部链接 -->
									<a :href="article.customContentView" target="_blank"
										v-if="article.articleType == 2">
										<div class="timeBox">
											<p class="day">{{ article.issueTime | formatDate1 }}</p>
											<p class="ym">{{ article.issueTime | formatDate }}</p>
										</div>
										<div class="newContent">
											<div class="newTitle">{{ article.title }}</div>
											<div class="newJs" v-html="article.description"></div>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>

		<!-- 区域分隔线 
			 - 用于页面不同模块间的视觉分隔
			 - 中间爱心图标与网站主题呼应
		-->
		<div class="section-divider">
			<div class="divider-line"></div>
			<div class="divider-icon">
				<i class="icon-heart"></i>
			</div>
			<div class="divider-line"></div>
		</div>

		<!-- 工具集部分 
			 - 响应式布局：移动端简介在左，PC端简介在右
			 - 包含95慈善问答助手和其他工具卡片
			 - 根据设备类型展示不同链接（PC端/移动端）
		-->
		<el-row :gutter="0" class="elRow animate-section" data-animation="slide-up" id="section1">
			<!-- 移动端布局：简介在左，内容在右 -->
			<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" v-if="windowWidth < 992">
				<div class="contentBox1">
					<div class="txtBox">
						<div class="boxTitle">工具集</div>
						<p>用智能技术赋能公益，涵盖需求匹配、项目追踪、数据统计等功能，提升慈善效率与透明度,让爱心精准触达需求，为公益行动注入科技力量。</p>
						<div class="more">了解更多</div>
					</div>
				</div>
			</el-col>

			<!-- 内容区域 -->
			<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
				<div class="contentBox2">
					<el-row :gutter="10" style="width: 100% !important" class="toolsBox">
						<!-- 95慈善问答助手 -->
						<el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<a class="rgzn" href="https://95csw.com/95cswd" target="_blank">
								<img src="../assets/rgzn.png" class="tool-img" />
								<div class="rgznTxt">
									<p class="rgznTxt2">95慈善问答助手</p>
									<p class="rgznTxt3">与AI对话，解答您想了解的慈善相关问题</p>
								</div>
								<div class="rgznSearchBox">
									<div class="rgznSearch">点击咨询</div>
									<p class="searchBut">立刻咨询</p>
								</div>
							</a>
						</el-col>

						<!-- 其他工具列表 -->
						<div v-for="(partner, index) in toolsList" :key="index">
							<el-col :span="8" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
								<!-- PC端链接 -->
								<a :href="partner.customContentView" target="_blank" class="partner" v-if="judge == 0">
									<img :src="'https://95csw.com/infornetwork/sys/common/static/' + partner.image"
										class="tool-img" />
									<div class="partnerN">
										<p class="partnerT">{{ partner.title }}</p>
										<p class="keywords">{{ partner.keywords }}</p>
									</div>
								</a>
								<!-- 移动端链接 -->
								<a :href="partner.customContentViewh5" target="_blank" class="partner" v-if="judge == 1">
									<img :src="'https://95csw.com/infornetwork/sys/common/static/' + partner.image"
										class="tool-img" />
									<div class="partnerN">
										<p class="partnerT">{{ partner.title }}</p>
										<p class="keywords">{{ partner.keywords }}</p>
									</div>
								</a>
							</el-col>
						</div>
					</el-row>
				</div>
			</el-col>

			<!-- PC端布局：简介在右 -->
			<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" v-if="windowWidth >= 992">
				<div class="contentBox1">
					<div class="txtBox">
						<div class="boxTitle">工具集</div>
						<p>用智能技术赋能公益，涵盖需求匹配、项目追踪、数据统计等功能，提升慈善效率与透明度,让爱心精准触达需求，为公益行动注入科技力量。</p>
						<div class="more">了解更多</div>
					</div>
				</div>
			</el-col>
		</el-row>

		<!-- 慈善场景展示部分 
			 - 左侧：场景展示标题和简介
			 - 右侧：场景图片网格布局
			 - 响应式设计：PC端3列，移动端2列
			 - 图片添加圆角和悬停动画效果
		-->
		<div class="bg animate-section" data-animation="slide-up">
			<el-row :gutter="0" class="elRow">
				<!-- 简介区域 -->
				<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
					<div class="contentBox1">
						<div class="txtBox">
							<div class="boxTitle">慈善场景展示</div>
							<p>慈善场景覆盖多元帮扶领域，可分为直接关怀型、资源支持型、长期赋能型三大类，成为需求与善意的连接点。</p>
							<div class="more">了解更多</div>
						</div>
					</div>
				</el-col>

				<!-- 内容区域 - 响应式网格布局 -->
				<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
					<div class="contentBox2">
						<el-row style="width: 100% !important">
							<div class="donation-grid">
								<div v-for="donation in donationList" :key="donation.id" class="donation-item">
									<img :src="'https://95csw.com/infornetwork/sys/common/static/' + donation.image"
										class="donation-img rounded-item" />
								</div>
							</div>
						</el-row>
					</div>
				</el-col>
			</el-row>
		</div>

		<!-- 友情链接区域 
			 - 标题居中显示并添加美化样式
			 - 仅展示链接图片，不显示文字
			 - 响应式布局：PC端每行最多10个，移动端每行6个
			 - 根据设备类型展示不同链接（PC端/移动端）
		-->
		<el-row :gutter="0" class="elRow animate-section" data-animation="slide-up">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<div class="contentBox2">
					<div class="sceneTitle centered-title">友情链接</div>
					<el-row :gutter="10" style="width: 100% !important">
						<div v-for="(link, index) in (windowWidth >= 540 ? linksList.slice(0, 10) : linksList.slice(0, 6))"
							:key="index">
							<el-col :xs="12" :sm="12" :md="6" :lg="5" :xl="5">
								<div class="link">
									<!-- PC端链接 -->
									<a :href="link.customContentView" target="_blank" v-if="judge === 0">
										<img class="linkImg"
											:src="'https://95csw.com/infornetwork/sys/common/static/' + link.image" />
									</a>
									<!-- 移动端链接 -->
									<a :href="link.customContentViewh5" target="_blank" v-if="judge === 1">
										<img class="linkImg"
											:src="'https://95csw.com/infornetwork/sys/common/static/' + link.image" />
									</a>
								</div>
							</el-col>
						</div>
					</el-row>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
// 导入无缝滚动组件
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
	name: 'Home',
	// 注册组件
	components: {
		vueSeamlessScroll
	},
	data() {
		return {
			// 标签切换相关
			curId: 0,                  // 当前选中的标签ID
			articleIndex: 0,            // 当前选中的文章分类索引

			// 图片资源列表
			imgList: ['https://demo.wuwenhui.cn/assets/addons/wwh/images/banner_pc.jpg'],

			// 数据列表 - 初始化空数组
			newsList: [],               // 新闻列表
			solutionList: [],           // 解决方案列表
			profile: {},                // 机构简介
			partnerList: [],            // 合作伙伴列表
			caseList: [],               // 案例列表
			carouselList: [],           // 轮播图数据
			noticeList: [],             // 公告列表
			articleList: [],            // 文章列表
			projectList: [],            // 项目列表
			toolsList: [],              // 工具列表
			donationList: [],           // 捐赠场景列表
			linksList: [],              // 友情链接列表

			// 响应式相关
			judge: 0,                   // 设备类型判断：0-PC端，1-移动端
			windowWidth: 0,             // 窗口宽度

			// 动画相关
			observer: null,             // 交叉观察器实例，用于滚动动画

			// 测试数据
			testIndex: 0,
			csDt: [{
				articleType: 0,
				issueTime: '2025-9-1',
				title: 'xxxxxxxx',
				description: '1234444'
			}]
		}
	},
	// 过滤器 - 用于数据格式化
	filters: {
		// 格式化日期为"年-月"格式
		formatDate: function (value) {
			if (!value) return '';
			let date = new Date(value);
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? ('0' + MM) : MM;
			return y + '-' + MM;
		},
		// 格式化日期为"日"
		formatDate1: function (value) {
			if (!value) return '';
			let date = new Date(value);
			let d = date.getDate();
			d = d < 10 ? ('0' + d) : d;
			return d;
		},
		// 格式化日期为"年-月-日"格式
		formatDate2: function (value) {
			if (!value) return '';
			let date = new Date(value);
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? ('0' + MM) : MM;
			let d = date.getDate();
			d = d < 10 ? ('0' + d) : d;
			return y + '-' + MM + '-' + d;
		},
		// 格式化数字为带千分位的格式
		getArea: function (area) {
			return String(area).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
		},
		// 格式化姓名，部分字符用*替换（隐私保护）
		name: function (value) {
			if (!value) return '';
			if (value.length <= 5) {
				return `${value.substring(0, 1)}*${value.substring(2, value.length)}`;
			} else {
				return `${value.substring(0, 3)}**${value.substring(7, value.length)}`;
			}
		}
	},
	// 生命周期钩子：组件创建时执行
	created() {
		// 初始化数据
		this.getHomeCarousel()      // 获取轮播图数据
		this.getAnnouncement()      // 获取公告数据
		this.getArticle()           // 获取文章及相关数据
		this.handleResize()         // 初始化窗口尺寸
	},
	// 生命周期钩子：组件挂载后执行
	mounted() {
		// 监听窗口尺寸变化
		window.addEventListener('resize', this.handleResize);
		// 初始化滚动动画
		this.initScrollAnimations();
	},
	// 生命周期钩子：组件销毁前执行
	beforeDestroy() {
		// 移除窗口尺寸变化监听
		window.removeEventListener('resize', this.handleResize);
		// 停止交叉观察器
		if (this.observer) {
			this.observer.disconnect();
		}
	},
	methods: {
		// 处理窗口尺寸变化
		handleResize() {
			this.windowWidth = window.innerWidth;
			// 根据窗口宽度判断设备类型
			if (this.windowWidth < 540) {
				this.judge = 1  // 移动端
			} else {
				this.judge = 0  // PC端
			}
		},
		// 数字格式化（保留0位小数）
		formatter: function (num) {
			return num.toFixed(0)
		},
		// 获取首页轮播图数据
		getHomeCarousel() {
			this.$axios.get("/base/basepcInfo/getHomeCarousel")
				.then((res) => {
					this.carouselList = res.data.result;
					// 拼接完整图片路径
					this.carouselList.forEach(a => {
						a.image = 'https://95csw.com/infornetwork/sys/common/static/' + a.image
					})
				})
		},
		// 获取公告数据
		getAnnouncement() {
			this.$axios.get("/base/basepcInfo/getAnnouncement")
				.then((res) => {
					this.noticeList = res.data.result;
				})
		},
		// 获取文章及相关数据
		getArticle() {
			// 获取行业资讯
			this.$axios.get("base/basepcInfo/getIndustryNewsCopy?pid=7")
				.then((res) => {
					this.articleList = res.data.result;
				})
			// 获取项目列表
			this.$axios.get("base/basepcInfo/getIndustryNewsCopy?pid=1962794688696078338")
				.then((res) => {
					this.projectList = res.data.result;
				})
			// 获取工具列表
			this.$axios.get("base/basepcInfo/getIndustryNewsCopy?pid=12")
				.then((res) => {
					this.toolsList = res.data.result[0]?.childrenarticles || [];
				})
			// 获取捐赠场景列表
			this.$axios.get("/base/basepcInfo/categoryCsYLByIdList?id=1963156813616525314")
				.then((res) => {
					this.donationList = res.data.result;
				})
			// 获取友情链接列表
			this.$axios.get("/base/basepcInfo/categoryCsYLByIdList?id=1963397464182595585")
				.then((res) => {
					this.linksList = res.data.result;
				})
		},
		// 初始化滚动动画
		initScrollAnimations() {
			// 配置观察器选项
			const options = {
				root: null,               // 使用视口作为根元素
				rootMargin: '0px',        // 根元素的边距
				threshold: 0.1            // 当元素可见度超过10%时触发
			};

			// 创建观察器实例
			this.observer = new IntersectionObserver((entries) => {
				entries.forEach(entry => {
					if (entry.isIntersecting) {
						// 元素进入视口，添加动画类
						const animation = entry.target.dataset.animation;
						entry.target.classList.add('animated', animation);
						// 只触发一次动画
						this.observer.unobserve(entry.target);
					}
				});
			}, options);

			// 观察所有带有animate-section类的元素
			document.querySelectorAll('.animate-section').forEach(section => {
				this.observer.observe(section);
			});
		}
	}
}
</script>
<style scoped>
/* 导入外部样式 */
@import '../static/css/am.css';
@import 'home.css';

/* 圆角样式 - 仅用于轮播图和公告区域 */
.rounded-container {
	border-radius: 12px;
	overflow: hidden;
}

.rounded-img {
	border-radius: 8px;
	object-fit: cover;
}

.rounded-carousel {
	border-radius: 12px;
	overflow: hidden;
}

/* 慈善场景响应式网格布局 */
.donation-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 移动端默认2列 */
	gap: 15px;
	/* 移动端间距 */
}

.donation-item {
	width: 100%;
}

.donation-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 120px;
	/* 保持一致的高度 */
}

/* 慈善场景项的圆角和动画效果 */
.rounded-item {
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.3s ease;
	/* 平滑过渡效果 */
}

/* 鼠标悬停效果 */
.rounded-item:hover {
	transform: translateY(-3px);
	/* 轻微上浮效果 */
}

/* 区域分隔线样式 */
.section-divider {
	display: flex;
	align-items: center;
	margin: 30px 0;
	width: 100%;
}

.divider-line {
	flex: 1;
	height: 1px;
	/* 渐变线条效果 */
	background: linear-gradient(to right, transparent, #e0e0e0, transparent);
}

.divider-icon {
	padding: 0 20px;
	color: #ff6b6b;
	/* 爱心颜色 - 与网站主题呼应 */
	font-size: 20px;
}

.icon-heart::before {
	content: "❤";
	/* 爱心符号 */
}

/* 滚动动画基础样式 */
.animate-section {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	will-change: opacity, transform;
	/* 优化动画性能 */
}

/* 动画触发后的样式 */
.animate-section.animated {
	opacity: 1;
	transform: translateY(0);
}

/* 不同动画类型的关键帧 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 为不同动画类型应用关键帧 */
.animate-section.animated.fade-in {
	animation: fadeIn 0.8s ease-out forwards;
}

.animate-section.animated.slide-up {
	animation: slideUp 0.8s ease-out forwards;
}

/* 针对Element UI轮播组件的穿透样式 */
/deep/ .el-carousel__container {
	border-radius: 12px;
	overflow: hidden;
}

/* 友情链接标题样式 - 居中并美化 */
.centered-title {
	text-align: center;
	font-size: 1.5rem;
	color: #333;
	margin: 0 0 20px;
	padding-bottom: 10px;
	position: relative;
	font-weight: 600;
}

/* 标题下方装饰线 */
.centered-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 3px;
	background-color: #ff6b6b;
	/* 与爱心颜色一致 */
	border-radius: 3px;
}

/* 响应式布局调整 - 平板及以上设备 */
@media screen and (min-width: 768px) {
	.donation-grid {
		grid-template-columns: repeat(3, 1fr);
		/* PC端3列布局 */
		gap: 12px;
		/* PC端间距稍小 */
	}

	.donation-img {
		min-height: 140px;
		/* PC端增加图片高度 */
	}
}

/* 响应式布局调整 - 移动端设备 */
@media screen and (max-width: 767px) {

	/* 调整轮播图高度 */
	/deep/.el-carousel__container {
		height: 160px !important;
	}

	/* 调整圆角大小 */
	.rounded-container,
	.rounded-carousel {
		border-radius: 8px;
	}

	.rounded-img,
	.rounded-item {
		border-radius: 6px;
	}

	/* 调整分隔线 */
	.section-divider {
		margin: 20px 0;
	}

	.divider-icon {
		padding: 0 15px;
		font-size: 16px;
	}

	/* 调整慈善场景网格 */
	.donation-grid {
		gap: 10px;
	}

	.donation-img {
		min-height: 100px;
	}

	/* 调整标题样式 */
	.centered-title {
		font-size: 1.2rem;
		margin-bottom: 15px;
		padding-bottom: 8px;
	}

	.centered-title::after {
		width: 40px;
		height: 2px;
	}
}

/* 大屏设备调整 */
@media only screen and (min-width: 1200px) {
	.el-col-lg-5 {
		width: 20%;
		/* 调整列宽，确保5列布局 */
	}
}
</style>